<!DOCTYPE html>
<html lang="ch-cn">
<head>
    <meta charset="UTF-8">
    <title>精细化管理平台</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="../../untitled/homework0914/css/index.css">
</head>
<body>
    <div class="wrapper">
        <div class="pm-head">
            <div class="h-left">
                <a href="#">LOGO</a>
            </div>
            <div class="h-right">
                <div class="uinfo">
                    <ul>
                        <li style="background-color:#5093e1;"><img src="./img/加号.png" alt=""></li>
                        <li><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                        <li>黄海管理员</li>
                        <li style="position: relative">
                            <img src="./img/气泡.png" alt="">
                            <span class="hat">4</span>
                        </li>
                    </ul>
                </div>
                <div class="search">
                    <div class="searchs">
                        <input type="text">
                    </div>

                </div>
            </div>
        </div>
        <div class="main">
            <div class="m-left">
                <ul>
                    <li><a class="active" href="javascript:void(0)">首页</a></li>
                    <li><a href="javascript:void(0)">员工信息管理</a></li>
                    <li><a href="javascript:void(0)">员工考勤</a></li>
                    <li><a href="javascript:void(0)">人事变动</a></li>
                    <li><a href="javascript:void(0)">帮助</a></li>
                </ul>
            </div>
            <div class="m-right">
                <div class="datas selected">
                    <div class="one-1">
                        <div class="one-1-1">
                            <ul class="one-1-1-1">
                                <li style="font-size: 40px;">8</li>
                                <li style="margin-top: -20px;height: 0">待处理</li>
                            </ul>
                            <ul class="one-1-1-2">
                                <li style="font-size: 40px;">2</li>
                                <li style="margin-top: -20px;height: 0">待审核</li>
                            </ul>
                            <ul class="one-1-1-3">
                                <li style="font-size: 40px;">10</li>
                                <li style="margin-top: -20px;height: 0">正在审核</li>
                            </ul>
                        </div>
                        <div class="one-1-2">
                            <b>最近录入员工信息</b>
                        </div>
                        <div class="one-1-3">
                            <li style="float: left">
                                <span><img src="./img/icon_QQ-纯色logo.png" alt=""></span>
                                <span>秦美丽</span>
                            </li>
                            <li style="float: right">
                                <span>照片</span>
                                <span>秦美丽</span>
                            </li>
                        </div>
                        <div class="one-1-3">
                            <li style="float: left">
                                <span>照片</span>
                                <span>秦美丽</span>
                            </li>
                            <li style="float: right">
                                <span>照片</span>
                                <span>秦美丽</span>
                            </li>
                        </div>
                        <div class="one-1-3">
                            <li style="float: left">
                                <span>照片</span>
                                <span>秦美丽</span>
                            </li>
                            <li style="float: right">
                                <span>照片</span>
                                <span>秦美丽</span>
                            </li>
                        </div>
                        <div class="one-1-2">
                            <b>最近员工变动</b>
                        </div>
                        <div class="one-1-4">
                            <li style="margin-top: 10px"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                            <li style="margin-left: 5px">黄河</li>
                            <span class="one-1-4-1">2019/08/01</span>
                            <span class="one-1-4-2">德玛西亚万岁我将带头冲锋</span>
                        </div>
                        <div class="one-1-4">
                            <li style="margin-top: 10px"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                            <li style="margin-left: 5px">黄河</li>
                            <span class="one-1-4-1">2019/08/01</span>
                            <span class="one-1-4-2">德玛西亚万岁我将带头冲锋</span>
                        </div>
                        <div class="one-1-4">
                            <li style="margin-top: 10px"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                            <li style="margin-left: 5px">黄河</li>
                            <span class="one-1-4-1">2019/08/01</span>
                            <span class="one-1-4-2">德玛西亚万岁我将带头冲锋</span>
                        </div>
                    </div>
                    <div class="one-2">
                        <div class="one-2-1">
                            <ul style="line-height: 35px;">
                                <select name="1" id="1">
                                    <option value="1">最近一个月</option>
                                </select>
                            </ul>
                            <ul style="margin-left: 20%">
                                <li><span>2015/02/01</span></li>
                                <li><span style="margin-left: 5px"><img src="./img/日历.png" alt="#"></span></li>
                            </ul>
                            <!--<ul style="border: 2px solid #999999;height: 0;width: 2.5%;"></ul>-->
                            <ul style="margin-left: 5%">
                                <li><span>2015/02/01</span></li>
                                <li><span style="margin-left: 5px"><img src="./img/日历.png" alt="#"></span></li>
                            </ul>
                        </div>
                        <div class="one-2-2">
                            <ul>
                                <li class="one-2-2-1"></li>
                                <li class="one-2-2-2">出勤率</li>
                            </ul>
                            <ul>
                                <li class="one-2-2-1"></li>
                                <li class="one-2-2-2">请假率</li>
                            </ul>
                            <ul>
                                <li class="one-2-2-1"></li>
                                <li class="one-2-2-2">出差率</li>
                            </ul>
                            <ul>
                                <li class="one-2-2-1"></li>
                                <li class="one-2-2-2">迟到率</li>
                            </ul>
                        </div>
                        <div style="height: 5%;width: 100%;background-color: white;">
                            <span style="margin-left: 10%">各部门招人情况（招人总人数/已招人数）</span>
                        </div>
                        <div class="one-2-3">
                            <ul class="one-2-3-1">
                                <li>
                                    <ol class="one-2-3-2"></ol>
                                    <ol class="one-2-3-3">市场部（-4）</ol>
                                </li>
                                <li>
                                    <ol class="one-2-3-2"></ol>
                                    <ol class="one-2-3-3">设计部（-1）</ol>
                                </li>
                                <li>
                                    <ol class="one-2-3-2"></ol>
                                    <ol class="one-2-3-3">工程部（-6）</ol>
                                </li>
                                <li>
                                    <ol class="one-2-3-2"></ol>
                                    <ol class="one-2-3-3">财务部（-1）</ol>
                                </li>
                            </ul>
                        </div>
                        <div class="one-2-4" style="float: left">
                            <ul>
                                <li class="one-2-4-1"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li class="one-2-4-2">
                                    <ol style="margin-left: 5px;float: left">登录</ol>
                                    <ol style="margin-right: 5px;float: right">09-10</ol>
                                </li>
                                <li class="one-2-4-2">
                                    <ol style="margin-left: 5px;float: left">录入德玛西亚信息</ol>
                                    <ol style="margin-right: 5px;float: right">09-10</ol>
                                </li>
                                <li class="one-2-4-2">
                                    <ol style="margin-left: 5px;float: left">录入德玛西亚信息</ol>
                                    <ol style="margin-right: 5px;float: right">09-10</ol>
                                </li>
                            </ul>
                        </div>
                        <div class="one-2-4" style="float: right">
                            <ul>
                                <li class="one-2-4-1"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li class="one-2-4-2">
                                    <ol style="margin-left: 5px;float: left">登录</ol>
                                    <ol style="margin-right: 5px;float: right">09-10</ol>
                                </li>
                                <li class="one-2-4-2">
                                    <ol style="margin-left: 5px;float: left">录入德玛西亚信息</ol>
                                    <ol style="margin-right: 5px;float: right">09-10</ol>
                                </li>
                                <li class="one-2-4-2">
                                    <ol style="margin-left: 5px;float: left">录入德玛西亚信息</ol>
                                    <ol style="margin-right: 5px;float: right">09-10</ol>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="datas">
                    <div class="two-1">
                        <ul class="two-1-1">
                            <span>相片</span>
                        </ul>
                        <ul class="two-1-1">
                            <span>姓名</span>
                        </ul>
                        <ul class="two-1-1">
                            <span>性别</span>
                        </ul>
                        <ul class="two-1-1">
                            <span>按部门</span>
                        </ul>
                        <ul class="two-1-1">
                            <span>按职位</span>
                        </ul>
                        <ul class="two-1-2">
                            <span>操作</span>
                        </ul>
                    </div>
                    <div class="two-2" style="margin-top: 1%">
                        <ul class="two-2-0">
                            <span><img src="./img/icon_QQ-纯色logo.png" alt=""></span>
                        </ul>
                        <ul class="two-2-1">
                            <span>谭志某</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>男</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>设计部</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>业务员</span>
                        </ul>
                        <ul class="two-2-2">
                            <li><a href="" style="color: blue">查看</a></li>
                            <li><a href="">删除</a></li>
                        </ul>
                    </div>
                    <div class="two-2">
                        <ul class="two-2-0">
                            <span><img src="./img/icon_QQ-纯色logo.png" alt=""></span>
                        </ul>
                        <ul class="two-2-1">
                            <span>谭志某</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>男</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>设计部</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>业务员</span>
                        </ul>
                        <ul class="two-2-2">
                            <li><a href="" style="color: blue">查看</a></li>
                            <li><a href="">删除</a></li>
                        </ul>
                    </div>
                    <div class="two-2">
                        <ul class="two-2-0">
                            <span><img src="./img/icon_QQ-纯色logo.png" alt=""></span>
                        </ul>
                        <ul class="two-2-1">
                            <span>谭志某</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>男</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>设计部</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>业务员</span>
                        </ul>
                        <ul class="two-2-2">
                            <li><a href="" style="color: blue">查看</a></li>
                            <li><a href="">删除</a></li>
                        </ul>
                    </div>
                    <div class="two-2">
                        <ul class="two-2-0">
                            <span><img src="./img/icon_QQ-纯色logo.png" alt=""></span>
                        </ul>
                        <ul class="two-2-1">
                            <span>谭志某</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>男</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>设计部</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>业务员</span>
                        </ul>
                        <ul class="two-2-2">
                            <li><a href="" style="color: blue">查看</a></li>
                            <li><a href="">删除</a></li>
                        </ul>
                    </div>
                    <div class="two-2">
                        <ul class="two-2-0">
                            <span><img src="./img/icon_QQ-纯色logo.png" alt=""></span>
                        </ul>
                        <ul class="two-2-1">
                            <span>谭志某</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>男</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>设计部</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>业务员</span>
                        </ul>
                        <ul class="two-2-2">
                            <li><a href="" style="color: blue">查看</a></li>
                            <li><a href="">删除</a></li>
                        </ul>
                    </div>
                    <div class="two-2">
                        <ul class="two-2-0">
                            <span><img src="./img/icon_QQ-纯色logo.png" alt=""></span>
                        </ul>
                        <ul class="two-2-1">
                            <span>谭志某</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>男</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>设计部</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>业务员</span>
                        </ul>
                        <ul class="two-2-2">
                            <li><a href="" style="color: blue">查看</a></li>
                            <li><a href="">删除</a></li>
                        </ul>
                    </div>
                    <div class="two-2">
                        <ul class="two-2-0">
                            <span><img src="./img/icon_QQ-纯色logo.png" alt=""></span>
                        </ul>
                        <ul class="two-2-1">
                            <span>谭志某</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>男</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>设计部</span>
                        </ul>
                        <ul class="two-2-1">
                            <span>业务员</span>
                        </ul>
                        <ul class="two-2-2">
                            <li><a href="" style="color: blue">查看</a></li>
                            <li><a href="">删除</a></li>
                        </ul>
                    </div>
                    <div class="two-3">
                        <li><a href="javascript:void(0)">尾页</a></li>
                        <li><a href="javascript:void(0)">...</a></li>
                        <li><a href="javascript:void(0)">4</a></li>
                        <li><a href="javascript:void(0)">3</a></li>
                        <li><a href="javascript:void(0)">2</a></li>
                        <li><a href="javascript:void(0)">1</a></li>
                    </div>
                </div>
                <div class="datas">
                    <div class="stree-1">
                        <div class="stree-1-1">
                            <ul><a class="stree-1-1-1" href="javascript:void(0)">请假</a></ul>
                            <ul><a href="javascript:void(0)">迟到/早退</a></ul>
                            <ul><a href="javascript:void(0)">出差</a></ul>
                            <ul><a href="javascript:void(0)">加班</a></ul>
                            <ul><a href="javascript:void(0)">旷工</a></ul>
                        </div>
                        <div class="stree-1-2">
                            <select name="p" id="p" style="height: 30px">
                                <option value="">最近一个月</option>
                            </select>
                        </div>
                    </div>
                    <div class="stree-2">
                        <div class="stree-2-1">
                            <ul class="stree-2-1-1">
                                <li style="width: 19%">相片</li>
                                <li style="width: 11%">姓名</li>
                                <li style="width: 11%">部门</li>
                                <li style="width: 15%">请假类型</li>
                                <li style="width: 35%;">日期</li>
                                <li style="width: 9%;float: right">操作</li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 11%">市场部</li>
                                <li style="width: 15%"><span style="color: white;background-color:blueviolet;">调休</span></li>
                                <li style="width: 35%">09/07/19-11/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 11%">市场部</li>
                                <li style="width: 15%"><span style="color: white;background-color:blueviolet;">调休</span></li>
                                <li style="width: 35%">09/07/19-11/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 11%">市场部</li>
                                <li style="width: 15%"><span style="color: white;background-color:blueviolet;">调休</span></li>
                                <li style="width: 35%">09/07/19-11/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 11%">市场部</li>
                                <li style="width: 15%"><span style="color: white;background-color:blueviolet;">调休</span></li>
                                <li style="width: 35%">09/07/19-11/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 11%">市场部</li>
                                <li style="width: 15%"><span style="color: white;background-color:blueviolet;">调休</span></li>
                                <li style="width: 35%">09/07/19-11/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 11%">市场部</li>
                                <li style="width: 15%"><span style="color: white;background-color:blueviolet;">调休</span></li>
                                <li style="width: 35%">09/07/19-11/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                        </div>
                        <div class="stree-2-2">
                            <div class="stree-2-2-1">
                                <ul style="margin-top: 0">
                                    <li style="width: 15%">调休</li>
                                    <li style="width: 70%;background-color:lightgreen;">ss</li>
                                    <li style="width: 15%">10人</li>
                                </ul>
                                <ul>
                                    <li style="width: 15%">调休</li>
                                    <li style="width: 70%;background-color:lightgreen;">ss</li>
                                    <li style="width: 15%">10人</li>
                                </ul>
                                <ul>
                                    <li style="width: 15%">调休</li>
                                    <li style="width: 70%;background-color:lightgreen;">ss</li>
                                    <li style="width: 15%">10人</li>
                                </ul>
                                <ul>
                                    <li style="width: 15%">调休</li>
                                    <li style="width: 70%;background-color:lightgreen;">ss</li>
                                    <li style="width: 15%">10人</li>
                                </ul>
                            </div>
                            <div class="stree-2-2-2">
                                <ul class="stree-2-2-3">
                                    <span>各部门请假比例</span>
                                </ul>
                                <ul class="stree-2-2-4" style="background-color:#7ab7ff;">
                                    <li style="font-size: 40px;color: white">50%</li>
                                    <li><b>业务部</b></li>
                                </ul>
                                <ul class="stree-2-2-5" style="background-color:#ff9a53;">
                                    <li style="font-size: 40px;color: white">30%</li>
                                    <li><b>设计部</b></li>
                                </ul>
                                <ul class="stree-2-2-4" style="margin-top: 1%;background-color:#5dcb8d;">
                                    <li style="font-size: 40px;color: white">15%</li>
                                    <li><b>工程部</b></li>
                                </ul>
                                <ul class="stree-2-2-5" style="margin-top: 1%;background-color:#98bae6;">
                                    <li style="font-size: 40px;color: white">5%</li>
                                    <li><b>财务部</b></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="two-3">
                        <li><a href="javascript:void(0)">尾页</a></li>
                        <li><a href="javascript:void(0)">...</a></li>
                        <li><a href="javascript:void(0)">4</a></li>
                        <li><a href="javascript:void(0)">3</a></li>
                        <li><a href="javascript:void(0)">2</a></li>
                        <li><a href="javascript:void(0)">1</a></li>
                    </div>
                </div>
                <div class="datas">
                    <div class="stree-1">
                        <div class="stree-1-1">
                            <ul><a class="stree-1-1-1" href="javascript:void(0)">转正</a></ul>
                            <ul><a href="javascript:void(0)">平调</a></ul>
                            <ul><a href="javascript:void(0)">升迁</a></ul>
                            <ul><a href="javascript:void(0)">退休</a></ul>
                            <ul><a href="javascript:void(0)">离职</a></ul>
                        </div>
                        <div class="stree-1-2">
                            <select name="p" id="222" style="height: 30px">
                                <option value="">最近一个月</option>
                            </select>
                        </div>
                    </div>
                    <div class="stree-2">
                        <div class="stree-2-1">
                            <ul class="stree-2-1-1">
                                <li style="width: 19%">相片</li>
                                <li style="width: 11%">姓名</li>
                                <li style="width: 19%">原职位</li>
                                <li style="width: 19%">现职位</li>
                                <li style="width: 23%;">日期</li>
                                <li style="width: 9%;float: right">操作</li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 19%">设计师助理</li>
                                <li style="width: 19%"><span style="color: white;background-color:blueviolet;">设计师</span></li>
                                <li style="width: 23%">09/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 19%">设计师助理</li>
                                <li style="width: 19%"><span style="color: white;background-color:blueviolet;">设计师</span></li>
                                <li style="width: 23%">09/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 19%">设计师助理</li>
                                <li style="width: 19%"><span style="color: white;background-color:blueviolet;">设计师</span></li>
                                <li style="width: 23%">09/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 19%">设计师助理</li>
                                <li style="width: 19%"><span style="color: white;background-color:blueviolet;">设计师</span></li>
                                <li style="width: 23%">09/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 19%">设计师助理</li>
                                <li style="width: 19%"><span style="color: white;background-color:blueviolet;">设计师</span></li>
                                <li style="width: 23%">09/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                            <ul class="stree-2-1-2">
                                <li style="width: 19%"><img src="./img/icon_QQ-纯色logo.png" alt=""></li>
                                <li style="width: 11%">徐大志</li>
                                <li style="width: 19%">设计师助理</li>
                                <li style="width: 19%"><span style="color: white;background-color:blueviolet;">设计师</span></li>
                                <li style="width: 23%">09/07/19</li>
                                <li style="width: 9%;float: right"><a href="" style="color: blue">查看</a></li>
                            </ul>
                        </div>
                        <div class="stree-2-2">
                            <div class="stree-2-2-1">
                                <ul style="margin-top: 0">
                                    <li style="width: 25%">主营</li>
                                    <li style="width: 60%;background-color:lightgreen;">ss</li>
                                    <li style="width: 15%">10人</li>
                                </ul>
                                <ul>
                                    <li style="width: 25%">设计师</li>
                                    <li style="width: 60%;background-color:lightgreen;">ss</li>
                                    <li style="width: 15%">10人</li>
                                </ul>
                                <ul>
                                    <li style="width: 25%">经理</li>
                                    <li style="width: 60%;background-color:lightgreen;">ss</li>
                                    <li style="width: 15%">10人</li>
                                </ul>
                                <ul>
                                    <li style="width: 25%">设计总监</li>
                                    <li style="width: 60%;background-color:lightgreen;">ss</li>
                                    <li style="width: 15%">10人</li>
                                </ul>
                            </div>
                            <div class="stree-2-2-2">
                                <ul class="stree-2-2-3">
                                    <span>各部门升迁比例</span>
                                </ul>
                                <ul class="four-1" style="margin-left: 3.25%">
                                    <li class="four-2">
                                        <ol class="four-2-1">
                                            <span>50%</span>
                                        </ol>
                                        <ol class="four-2-2">

                                        </ol>
                                    </li>
                                    <li><span>市场部</span></li>
                                </ul>
                                <ul class="four-1">
                                    <li class="four-2">
                                        <ol class="four-2-3">
                                            <span>20%</span>
                                        </ol>
                                        <ol class="four-2-4">

                                        </ol>
                                    </li>
                                    <li><span>设计部</span></li>
                                </ul>
                                <ul class="four-1">
                                    <li class="four-2">
                                        <ol class="four-2-5">
                                            <span>10%</span>
                                        </ol>
                                        <ol class="four-2-6">

                                        </ol>
                                    </li>
                                    <li><span>工程部</span></li>
                                </ul>
                                <ul class="four-1">
                                    <li class="four-2">
                                        <ol class="four-2-7">
                                            <span>20%</span>
                                        </ol>
                                        <ol class="four-2-8">

                                        </ol>
                                    </li>
                                    <li><span>开发部</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="two-3">
                        <li><a href="javascript:void(0)">尾页</a></li>
                        <li><a href="javascript:void(0)">...</a></li>
                        <li><a href="javascript:void(0)">4</a></li>
                        <li><a href="javascript:void(0)">3</a></li>
                        <li><a href="javascript:void(0)">2</a></li>
                        <li><a href="javascript:void(0)">1</a></li>
                    </div>
                </div>
                <div class="datas">
                    five
                </div>
            </div>

        </div>
    </div>
</body>
<script>
    //1.首先获取要设置时间的标签
    var as = document.querySelectorAll('.m-left > ul > li > a')
    for(var i = 0; i < as.length; i++) {
        (function (num) {
            as[num].onclick = function () {
                changeTab(num)
            }
        })(i)
    }
    var tabs = document.querySelectorAll('.m-right > div.datas')
    function changeTab(index) {
        for(var i = 0; i<tabs.length;i++){
            //1.还原未选中状态
            tabs[i].classList.remove('selected');
            as[i].classList.remove('active')
        }
        //2.选中
        tabs[index].classList.add('selected');
        as[index].classList.add('active')
    }
</script>
</html>